<template>

  <el-drawer
      :with-header="false"
      :modal="false"
      :show-close="false"
      size="100%"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="visible"
      direction="rtl"
      custom-class="drawer">
    <div class="cont-deploy">
      <div class="right">
        <div class="title">配置源信息</div>

        <div class="form-box-item" v-for="(runform,index) in lists" :key="index">
          <el-form
              :model="runform"
              ref="runform"
              size="small"
              label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="名称" prop="">
                  <el-input v-model="runform.name" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="类型" prop="type">
                  <el-select v-model="runform.type" @change="runformTypeChange" style="width: 100%;">
                    <el-option label="设置值" :value="0"></el-option>
                    <el-option label="消息队列" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="runform.type===1">
                <el-form-item label="队列" prop="queue">
                  <el-select v-model="runform.queue" style="width: 100%;">
                    <el-option label="ZeroMQ" :value="0"></el-option>
                    <el-option label="ActiveMQ" :value="1"></el-option>
                    <el-option label="RabbitMQ" :value="2"></el-option>
                    <el-option label="RocketMQ" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="runform.type===1">
                <el-form-item label="模式" prop="subscribe">
                  <el-select v-model="runform.subscribe" style="width: 100%;">
                    <el-option label="发布订阅" :value="0"></el-option>
                    <el-option label="请求响应" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18" v-if="runform.type===1 && runform.subscribe===0">
                <el-form-item label="IP地址" prop="ip">
                  <el-input v-model="runform.ip"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="runform.type===1 && runform.subscribe===0">
                <el-form-item label=":" prop="port" label-width="20px" class="port">
                  <el-input v-model="runform.port" placeholder="端口"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="runform.subscribe===1">
                <el-form-item label="响应内容" prop="responsevule">
                  <el-input v-model="runform.responsevule" placeholder="响应内容"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24" v-if="runform.type===0">
                <el-form-item label="subid" prop="subid">
                  <el-table
                      class="yt-table"
                      :data="runform.runformTableList"
                      border
                      style="width: 100%">
                    <el-table-column prop="" label="" width="40px" align="center">
                      <template slot-scope="scope">
                        <el-radio
                            :label="scope.row.id"
                            v-model="runform.subid"></el-radio>
                      </template>
                    </el-table-column>
                    <el-table-column prop="pname" label="组件名称"></el-table-column>
                    <el-table-column prop="pfName" label="函数名称" width="100px"></el-table-column>
                    <el-table-column prop="pname" label="参数名称" width="100px"></el-table-column>
                    <el-table-column prop="avalue" label="参数值" width="120px" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="addTimeStr" label="新增时间" width="100px"></el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      visible: false,
      lists: []
    };
  },
  computed: {},
  mounted() {

  },
  created() {

  },
  methods: {
    show(data) {
      this.visible = true
      console.log(999)
      this.lists = data.map(item => {
        return {
          appid: item.appid,
          runformTableList:[],
          type: '',
          queue: '',
          subscribe: '',
          ip: '',
          port: '',
          responsevule: '',
          subid: '',
        }
      })
    },
    runformTypeChange() {
      // this.$refs.runform.clearValidate();
      // this.runform.queue = ''
      // this.runform.publise = ''
      // this.runform.ip = ''
      // this.runform.port = ''

      if (this.runform.type === 0) {
        // this.$api.getAppDataByAppId({appId: this.runform.appid}).then(res => {
        //   if (res.data.code === 0) {
        //     this.runformTableList = res.data.data.map(item => {
        //       return {
        //         ...item,
        //         addTimeStr: this.$moment(item.addTime).format('YYYY-MM-DD'),
        //         editTimeStr: item.editTime ? this.$moment(item.editTime).format('YYYY-MM-DD') : '--',
        //         pname: item.paramName ? item.paramName.split(' ')[1] || '' : ''
        //       }
        //     })
        //   }
        // })
      }
    },
  },
};
</script>
<style lang="less" scoped>
  .drawer {
    .cont-deploy {
      height: 100%;

      .title {
        background: #4d5c71;
        color: white;
        height: 35px;
        line-height: 35px;
        padding-left: 20px;
      }

      .form-box-item {
        padding: 15px 50px 15px 15px;
      }
    }
  }

  /deep/ .el-form-item {
    margin-bottom: 18px !important;
  }

  /deep/ .el-form-item .el-form-item__label {
    color: #333333 !important;
  }
</style>